<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200" style="width: 750rpx; height: 250rpx;">
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/swiper/swiper-demo1.png" style="width: 750rpx; height: 250rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/swiper/swiper-demo2.png" style="width: 750rpx; height: 250rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/swiper/swiper-demo3.png" style="width: 750rpx; height: 250rpx;"></image>
			</swiper-item>
		</swiper>
	
		
		
		<view class="flex flex-1 align-center justify-center text-white" style="width: 750rpx; height: 150rpx;">
			<view class="flex flex-column mr-4" style="background-color: #f4bab4; width: 320rpx; height: 130rpx; border-radius: 30rpx;" @click="openIndexFunc1">
				<text style="margin-left:35rpx; margin-top:15rpx; font-size: 35rpx; font-weight: bold;">失宠招领</text>
				<text style="margin-left:35rpx; font-size: 25rpx;">自你离开，我好想你～</text>
			</view>
			<view class="flex flex-column text-white" style="background-color: #8fd2c8; width: 320rpx; height: 130rpx; border-radius: 30rpx;" @click="openIndexFunc2">
				<text style="margin-left:35rpx; margin-top:15rpx; font-size: 35rpx; font-weight: bold;">捐助我们</text>
				<text style="margin-left:35rpx; font-size: 25rpx;">爱狗头人，爱公益～</text>
			</view>
		</view>
		
		<view class="flex">
			<image src="https://www.dogeman.studio/public/uploads/static/swiper/split_line.png" style="width: 750rpx; height: 75rpx;"></image>
		</view>
		
		<!-- 列表 --> 
		<view class="flex flex-wrap" style="background-color: #f0f0f0;">
			<view class="list-item" v-for="(item, index) in center_list" :key="index" @click="openCenter(item.id)" style="margin: 1rpx;">
				<!-- border: 1px solid rgba(0,0,0,0.1); border-radius: 5rpx; border-style: dashed; -->
				
				<image :src="item.coverImg" style="width: 355rpx; height: 355rpx; border-radius: 20rpx;" mode="aspectFill"></image>
				
				<view class="rounded-circle px-2 flex align-center" style="position: absolute; left: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);">
				<image src="https://www.dogeman.studio/public/uploads/static/functions/donations.png" style="width:35rpx;height:35rpx; background-color: rgba(0,0,0,0.4);" class="rounded-circle"></image>
				<text class="text-white font-sm">{{item.funderMoney}}</text>
				</view>
				
				<view class="rounded-circle px-2 flex align-center" style="position: absolute; right: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);">
				<text class="font-sm text-white">救助者：</text><text class="text-white font-sm">{{item.funderNum}}</text>
				</view>
				
				<view v-if="item.livestreamStatus == 1" class="rounded-circle px-2 flex align-center" style="position: absolute; right: 15rpx; bottom: 195rpx; background-color: rgba(0,0,0,0.4);">
				<text style="width: 20rpx; height: 20rpx;" class="rounded-circle mr-1 bg-danger">
				</text><text class="text-white font-sm">直播中</text>
				</view>
				
				<view class="p">
					<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="position: absolute; left: 15rpx; bottom: 115rpx;width:55rpx;height:55rpx;" class="rounded-circle"></image>
				</view>
				<text style="position: absolute; left: 75rpx; bottom: 115rpx; font-size: 30rpx; font-weight: bold;">{{item.stationName}}</text>
				
				<view class="rounded-circle flex align-center" style="position: absolute; left: 15rpx; bottom: 55rpx;">
				<text style="color:goldenrod; font-size:30rpx;">“{{item.briefIntroduction}}”</text>
				</view>
				
				<view class="rounded-circle flex align-center" style="position: absolute; left: 15rpx; bottom: 5rpx;">
				<view v-if="item.catNum > 0" class="flex align-center justify-center pl-1 pr-1 my-1" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
					<text style="font-size: 23rpx; color: white; font-weight: bold;">猫</text>
				</view>
				<view v-if="item.dogNum > 0" class="flex align-center justify-center pl-1 pr-1 my-1" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
					<text style="font-size: 23rpx; color: white; font-weight: bold;">狗</text>
				</view>
				<view v-if="(item.catNum+item.dogNum) > 0" class="flex align-center justify-center pl-1 pr-1 my-1" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
					<text style="font-size: 23rpx; color: white; font-weight: bold;">共{{item.catNum+item.dogNum}}只</text>
				</view>
				</view>
				
				
			</view>
			
		</view>
		
		<view class="f-divider"></view>
		<view class="flex align-center justify-center py-3">
			<text class="font-md text-secondary">{{ loadText }}</text>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				center_list:[],
				page:1,
				loadText:"上拉加载更多"
			}
		},
		onLoad() {
			this.getData()
			
		},
		onReachBottom() {
			if(this.loadText !== '上拉加载更多'){
				return
			}
			this.loadText = '加载中...'
			this.page++
			this.getData()
		},
		methods: {
			openIndexFunc1(){
				uni.showToast({
					title: '该功能尚待开发哦～',
					icon: 'none'
				});
			},
			openIndexFunc2(){
				uni.showToast({
					title: '该功能尚待开发哦～',
					icon: 'none'
				});
			},
			getData(){
				let page = this.page
				return this.$H.get('/rescue_station/lookStation/'+page).then(res=>{
					this.center_list = page === 1 ? res : [...this.center_list,...res],
					this.loadText = res.length < 10 ? '没有更多了' : '上拉加载更多'
					console.log(this.center_list)
				}).catch(err=>{
					if(this.page > 1){
						this.page--
						this.loadText = '上拉加载更多'
					}
				})
			},
			openCenter(id){
				uni.navigateTo({
					url: "../center/center?id="+id
				});
			}
		}
	}
</script>

<style>
	.list-item{
		width: 370rpx; height: 545rpx; padding: 5rpx; box-sizing: border-box; position: relative; background-color: white; border-radius: 20rpx;
	}
</style>
